<template>
  <div
    class="mine-step">
    <div class="mine-step-icon" :class="`is-${currentStatus}`">
      <i v-if="currentStatus === this.$parent.finishStatus" class="iconfont icon-success-line"></i>
      <span v-else>{{index + 1}}</span>
    </div>
    <div class="mine-step-title" :class="`is-${currentStatus}`">
      {{title}}
    </div>
    <div
      class="mine-step-line"
      :class="[
        `is-${currentStatus}`,
        { 'is-last': isLast }
      ]"></div>
  </div>
</template>
<script>
export default {
  props: {
    title: String,
    icon: String,
    status: String,
  },
  data() {
    return {
      index: -1,
      lineStyle: {},
      internalStatus: ''
    };
  },
  beforeCreate () {
    this.$parent.steps.push(this);
  },
  beforeDestroy () {
    const steps = this.$parent.steps;
    const index = steps.indexOf(this);
    if (index >= 0) {
      steps.splice(index, 1);
    }
  },
  computed: {
    currentStatus () {
      return this.status || this.internalStatus;
    },
    prevStatus() {
      const prevStep = this.$parent.steps[this.index - 1];
      return prevStep ? prevStep.currentStatus : 'wait';
    },
    isLast() {
      const parent = this.$parent;
      return parent.steps[parent.steps.length - 1] === this;
    },
    stepsCount() {
      return this.$parent.steps.length;
    },
  },
  methods: {
    updateStatus(val) {
      const prevChild = this.$parent.$children[this.index - 1];

      if (val > this.index) {
        this.internalStatus = this.$parent.finishStatus;
      } else if (val === this.index && this.prevStatus !== 'error') {
        this.internalStatus = this.$parent.processStatus;
      } else {
        this.internalStatus = 'wait';
      }

      if (prevChild) prevChild.calcProgress(this.internalStatus);
    },

    calcProgress(status) {
      let step = 100;
      const style = {};

      style.transitionDelay = 150 * this.index + 'ms';
      if (status === this.$parent.processStatus) {
        step = this.currentStatus !== 'error' ? 0 : 0;
      } else if (status === 'wait') {
        step = 0;
        style.transitionDelay = (-150 * this.index) + 'ms';
      }

      style.borderWidth = step && !this.isSimple ? '1px' : 0;
      this.$parent.direction === 'vertical'
        ? style.height = step + '%'
        : style.width = step + '%';

      this.lineStyle = style;
    }
  },

  mounted() {
    const unwatch = this.$watch('index', val => {
      this.$watch('$parent.active', this.updateStatus, { immediate: true });
      this.$watch('$parent.processStatus', () => {
        const activeIndex = this.$parent.active;
        this.updateStatus(activeIndex);
      }, { immediate: true });
      unwatch();
    });
  }
}
</script>
<style lang="less" scoped>
@import '~@/style/variables.less';
.mine-step {
  position: relative;
  flex-shrink: 1;
  display: flex;
  align-items: center;
}
.mine-step-icon {
  width: 32px;
  height: 32px;
  font-size: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: @--color-white;
  background-color: @--color-text-placeholder;
  margin-right: 8px;
  border: 1px solid @--color-text-placeholder;
  box-sizing: border-box;
  &.is-process {
    color: @--color-white;
    background-color: @--color-primary;
    border-color: @--color-primary;
  }
  &.is-wait {
    color: @--color-white;
    background-color: @--color-text-placeholder;
  }
  &.is-finish {
    color: @--color-primary;
    background-color: @--color-white;
    border-color: @--color-primary;
  }
}
.mine-step-title {
  font-size: 14px;
  margin-right: 8px;
  &.is-process {
    color: @--color-text-primary;
    font-weight: 500;
  }
  &.is-wait {
    color: @--color-text-placeholder;
  }
  &.is-finish {
    color: @--color-text-primary;
  }
}
.mine-step-line {
  width: 150px;
  height: 1px;
  background-color: @--color-text-placeholder;
  margin-right: 8px;
  &.is-last {
    display: none;
  }
}
</style>
